<script setup>
import { ref, onMounted } from 'vue'
import { airspaceInfoServer } from '@/api'
import { useRouter } from 'vue-router'
const navBar = ref('')
const list = ref([
  {
    name: '低空产业链',
    value: 45,
    unit: '家'
  },
  {
    name: '空域数量',
    value: 7,
    unit: '个'
  },
  {
    name: '空域面积',
    value: 13,
    unit: 'km²'
  },
  {
    name: '常态航线',
    value: 17,
    unit: '条'
  },
  {
    name: '起降点数量',
    value: 6,
    unit: '个'
  },
  {
    name: '低空运营企业',
    value: 3,
    unit: '家'
  }
])
const airspaceInfo = async () => {
  const res = await airspaceInfoServer()
  const { airspaceCount, airspaceArea, airlineCount, riseLandPointCount, companyCount } = res.data
  //   console.log("riseLandPointCount:",airspaceCount, airspaceArea, airlineCount, riseLandPointCount, companyCount)
  list.value[1].value = 7
  list.value[2].value = airspaceArea
  list.value[3].value = airlineCount
  list.value[4].value = riseLandPointCount
  list.value[5].value = companyCount
}

const router = useRouter()
const changeNav = (item) => {
  if (item.name == '低空产业链') {
    router.push({ name: 'Industry' })
  } else {
    navBar.value = item.name
  }
}

onMounted(() => {
  airspaceInfo()
})
</script>
<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animate__animated  animate__fadeIn"
    leave-active-class="animate__animated  animate__fadeOut"
  >
    <div class="bottombox">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        :class="{ active: navBar == item.name }"
        @click="changeNav(item)"
      >
        <div :class="['itembg', 'itembg' + index]">
          <p>{{ item.name }}</p>
          <p>
            <NumberAnimate :count="item.value"></NumberAnimate><span>{{ item.unit }}</span>
          </p>
        </div>
      </div>
    </div>
  </transition>
</template>
<style scoped lang="scss">
.bottombox {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
    margin: 0 10px;
    width: 165px;
    height: 117px;
    background: url('@img/overview/bottom_btn_bg.png');
    background-size: 100% 100%;
    opacity: 0.7;

    &.active,
    &:hover {
      opacity: 1;
      cursor: pointer;
    }

    .itembg {
      width: 140px;
      height: 58px;
      padding-left: 60px;
      p:last-child {
        flex: 1;

        &:deep(.odometer-numbers) {
          span {
            font-family: DINAlternate;
            font-size: 28px;
            line-height: 28px;
            color: #ffffff;
            letter-spacing: 5px;
            text-align: center;
            background: linear-gradient(to bottom, #ffffff 0%, #00d5ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }

    .itembg0 {
      background: url('@img/overview/bottom_btn00.png');
      background-size: 100% 100%;
    }

    .itembg1 {
      background: url('@img/overview/bottom_btn01.png');
      background-size: 100% 100%;
    }

    .itembg2 {
      background: url('@img/overview/bottom_btn02.png');
      background-size: 100% 100%;
    }

    .itembg3 {
      background: url('@img/overview/bottom_btn03.png');
      background-size: 100% 100%;
    }

    .itembg4 {
      background: url('@img/overview/bottom_btn04.png');
      background-size: 100% 100%;
    }

    .itembg5 {
      background: url('@img/overview/bottom_btn05.png');
      background-size: 100% 100%;
    }

    p:first-child {
      font-size: 13px;
    }

    p:last-child {
      font-size: 27px;
      margin-top: 2px;
      font-family: DINAlternate;
      display: flex;
      align-items: center;

      > span {
        font-size: 14px;
      }
    }
  }
}
</style>
